<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>outline属性的妙用</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			ul{
				list-style: none;
				width: 600px;
				margin: auto
			}
			li{
				padding: 10px;
				border: 10px solid pink;
				outline-offset: -10px;
				cursor: pointer;
			}
			li+li{
				margin-top: -10px;
			}
			li:hover{
				outline: 10px solid gold;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
		</ul>
	</body>
</html>